<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  name: string
  prefix?: string
  color?: string
  size?: string | number
}
const props = withDefaults(defineProps<Props>(), {
  prefix: 'icon',
  size: '1em'
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const svgSize = computed(() => {
  if (typeof props.size === 'number') {
    return `${props.size}px`
  }
  return props.size
})
</script>

<template>
  <svg aria-hidden="true" class="svg-icon" :width="svgSize" :height="svgSize">
    <use class="transition-colors" :xlink:href="symbolId" :fill="color" />
  </svg>
</template>
